<template>
    <div>
        <!-- Scroll-top -->
        <button class="scroll-top scroll-to-target"
        @click="toTop"
        data-target="html">
            <i class="fas fa-angle-up"></i>
        </button>
        <!-- Scroll-top-end-->

        <!-- header-area -->
     
        <!-- header-area -->
        <header>

            <!-- header-message -->
            <div class="header-message-wrap">
                <div class="container custom-container">
                    <div class="row">
                        <div class="col-12">
                            <div class="top-notify-message">
                                <p>place your complaints (if any) within 24hrs of receiving your delivery</p>
                                <span class="message-remove">X</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- header-message-end -->

            <!-- header-top-start -->
            <div class="header-top-wrap">
                <div class="container custom-container">
                    <div class="row align-items-center">
                        <div class="col-md-7">
                            <div class="header-top-left">
                                <ul>
                                    <li class="header-top-lang">
                                        <div class="dropdown">
                                            <button class="dropdown-toggle" type="button" id="dropdownMenuButton2" data-toggle="dropdown" aria-haspopup="true"
                                                aria-expanded="false">English</button>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
                                                <a class="dropdown-item" href="index.html">Spanish</a>
                                                <a class="dropdown-item" href="index.html">Chinese</a>
                                                <a class="dropdown-item" href="index.html">Hindi</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="header-top-currency">
                                        <div class="dropdown">
                                            <button class="dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true"
                                                aria-expanded="false">USD - US Dollar</button>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
                                                <a class="dropdown-item" href="index.html">INR - IN Rupe</a>
                                                <a class="dropdown-item" href="index.html">BDT - BD Taka</a>
                                                <a class="dropdown-item" href="index.html">SAR - SA Riyal</a>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="header-work-time">
                                        Working time: <span> Mon - Sat : 8:00 - 21:0</span>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-md-5">
                            <div class="header-top-right">
                                <ul>
                                    <li><a href="contact.html">My Account</a></li>
                                    <li><a href="about-us.html">About Us</a></li>
                                    <li><a href="contact.html">Contact</a></li>
                                    <li><a href="contact.html">FAQ</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- header-top-end -->

            <!-- header-search-area -->
            <div class="header-search-area">
                <div class="container custom-container">
                    <div class="row align-items-center">
                        <div class="col-xl-2 col-lg-3 d-none d-lg-block">
                            <div class="logo">
                                <a href="index.html"><img src="img/logo/logo.png" alt="Logo"></a>
                            </div>
                        </div>
                        <div class="col-xl-10 col-lg-9">
                            <div class="d-block d-sm-flex align-items-center justify-content-end">
                                <div class="header-search-wrap">
                                    <form action="#">
                                        <select class="custom-select">
                                            <option selected="">All Categories</option>
                                            <option>-- Grocery & Frozen</option>
                                            <option>-- Fresh Fruits</option>
                                            <option>-- Fresh Fish</option>
                                            <option>-- Fresh Nuts</option>
                                            <option>-- Fresh Meats</option>
                                            <option>-- Bread & Bakery</option>
                                            <option>-- Vegetable</option>
                                            <option>-- Kids Food</option>
                                            <option>-- Dried Fruits</option>
                                            <option>-- Others Food</option>
                                        </select>
                                        <input type="text" placeholder="Search Product...">
                                        <button><i class="flaticon-loupe-1"></i></button>
                                    </form>
                                </div>
                                <div class="header-action">
                                    <ul>
                                        <li class="header-phone">
                                            <div class="icon"><i class="flaticon-telephone"></i></div>
                                            <a href="tel:1234566789"><span>Call Us Now</span>+185 4124 650</a>
                                        </li>
                                        <li class="header-user"><a href="#"><i class="flaticon-user"></i></a></li>
                                        <li class="header-wishlist">
                                            <a href="#"><i class="flaticon-heart-shape-outline"></i></a>
                                            <span class="item-count">0</span>
                                        </li>
                                        <li class="header-cart-action">
                                            <div class="header-cart-wrap">
                                                <a href="cart.html"><i class="flaticon-shopping-basket"></i></a>
                                                <span class="item-count">2</span>
                                                <ul class="minicart">
                                                    <li class="d-flex align-items-start">
                                                        <div class="cart-img">
                                                            <a href="shop-details.html"><img src="img/product/cart_p01.jpg" alt=""></a>
                                                        </div>
                                                        <div class="cart-content">
                                                            <h4><a href="shop-details.html">Organic Farm Fresh Nuts</a></h4>
                                                            <div class="cart-price">
                                                                <span class="new">$229.9</span>
                                                                <span><del>$229.9</del></span>
                                                            </div>
                                                        </div>
                                                        <div class="del-icon">
                                                            <a href="#"><i class="far fa-trash-alt"></i></a>
                                                        </div>
                                                    </li>
                                                    <li class="d-flex align-items-start">
                                                        <div class="cart-img">
                                                            <a href="shop-details.html"><img src="img/product/cart_p02.jpg" alt=""></a>
                                                        </div>
                                                        <div class="cart-content">
                                                            <h4><a href="shop-details.html">Organic Fresh Nuts Vanla Butter</a></h4>
                                                            <div class="cart-price">
                                                                <span class="new">$229.9</span>
                                                                <span><del>$229.9</del></span>
                                                            </div>
                                                        </div>
                                                        <div class="del-icon">
                                                            <a href="#"><i class="far fa-trash-alt"></i></a>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="total-price">
                                                            <span class="f-left">Total:</span>
                                                            <span class="f-right">$239.9</span>
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div class="checkout-link">
                                                            <a href="cart.html">Shopping Cart</a>
                                                            <a class="black-color" href="checkout.html">Checkout</a>
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="cart-amount">$0.00</div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- header-search-area-end -->

            <div id="sticky-header" class="menu-area">
                <div class="container custom-container">
                    <div class="row">
                        <div class="col-12">
                            <div class="mobile-nav-toggler"><i class="fas fa-bars"></i></div>
                            <div class="menu-wrap">
                                <nav class="menu-nav">
                                    <div class="logo d-block d-lg-none">
                                        <a href="index.html"><img src="img/logo/logo.png" alt=""></a>
                                    </div>
                                    <div class="header-category d-none d-lg-block">
                                        <a href="#" class="cat-toggle"><i class="fas fa-bars"></i>ALL DEPARTMENT<i class="fas fa-angle-down"></i></a>
                                        <ul class="category-menu">
                                            <li class="menu-item-has-children"><a href="shop.html"><i class="flaticon-groceries"></i> Grocery & Frozen</a>
                                                <ul class="megamenu">
                                                    <li class="sub-column-item"><a href="shop.html">Grocery & Frozen</a>
                                                        <ul>
                                                            <li><a href="shop.html">Organic Broccoli</a></li>
                                                            <li><a href="shop.html">Walnuts Max</a></li>
                                                            <li><a href="shop.html">Mat Orange</a></li>
                                                            <li><a href="shop.html">France Potato</a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="sub-column-item"><a href="shop.html">Organic Fresh Fruits</a>
                                                        <ul>
                                                            <li><a href="shop.html">Watermelon</a></li>
                                                            <li><a href="shop.html">Black Grapes</a></li>
                                                            <li><a href="shop.html">Grassland Dairy</a></li>
                                                            <li><a href="shop.html">Organic Broccoli</a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="sub-column-item"><a href="shop.html">Fresh Bread & Bakery</a>
                                                        <ul>
                                                            <li><a href="shop.html">Grassland Dairy</a></li>
                                                            <li><a href="shop.html">Walnuts Max</a></li>
                                                            <li><a href="shop.html">Powders Dairy</a></li>
                                                            <li><a href="shop.html">Ice cream</a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="sub-column-item"><a href="shop.html">Organic Fresh Meat</a>
                                                        <ul>
                                                            <li><a href="shop.html">Fresh Butter</a></li>
                                                            <li><a href="shop.html">Orange Sliced</a></li>
                                                            <li><a href="shop.html">Carrots Group</a></li>
                                                            <li><a href="shop.html">Poultry Farm</a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="sub-column-item"><a href="shop.html">Organic Dried Fruit</a>
                                                        <ul>
                                                            <li><a href="shop.html">Fresh Nuts</a></li>
                                                            <li><a href="shop.html">France Potato</a></li>
                                                            <li><a href="shop.html">Green Chilies</a></li>
                                                            <li><a href="shop.html">Organic Broccoli</a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="sub-column-item"><a href="shop.html">Organic Other Foods</a>
                                                        <ul>
                                                            <li class="mega-menu-banner"><a href="shop.html"><img src="img/images/megamenu_banner.jpg" alt=""></a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li><a href="shop.html"><i class="flaticon-cherry"></i> Fresh Fruits</a></li>
                                            <li><a href="shop.html"><i class="flaticon-fish"></i> Fresh Fish</a></li>
                                            <li class="menu-item-has-children"><a href="shop.html"><i class="flaticon-hazelnut"></i> Fresh Nuts</a>
                                                <ul class="megamenu">
                                                    <li class="sub-column-item"><a href="shop.html">Grocery & Frozen</a>
                                                        <ul>
                                                            <li><a href="shop.html">Organic Broccoli</a></li>
                                                            <li><a href="shop.html">Walnuts Max</a></li>
                                                            <li><a href="shop.html">Mat Orange</a></li>
                                                            <li><a href="shop.html">France Potato</a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="sub-column-item"><a href="shop.html">Organic Fresh Fruits</a>
                                                        <ul>
                                                            <li><a href="shop.html">Watermelon</a></li>
                                                            <li><a href="shop.html">Black Grapes</a></li>
                                                            <li><a href="shop.html">Grassland Dairy</a></li>
                                                            <li><a href="shop.html">Organic Broccoli</a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="sub-column-item"><a href="shop.html">Fresh Bread & Bakery</a>
                                                        <ul>
                                                            <li><a href="shop.html">Grassland Dairy</a></li>
                                                            <li><a href="shop.html">Walnuts Max</a></li>
                                                            <li><a href="shop.html">Powders Dairy</a></li>
                                                            <li><a href="shop.html">Ice cream</a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="sub-column-item"><a href="shop.html">Organic Fresh Meat</a>
                                                        <ul>
                                                            <li><a href="shop.html">Fresh Butter</a></li>
                                                            <li><a href="shop.html">Orange Sliced</a></li>
                                                            <li><a href="shop.html">Carrots Group</a></li>
                                                            <li><a href="shop.html">Poultry Farm</a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="sub-column-item"><a href="shop.html">Organic Dried Fruit</a>
                                                        <ul>
                                                            <li><a href="shop.html">Fresh Nuts</a></li>
                                                            <li><a href="shop.html">France Potato</a></li>
                                                            <li><a href="shop.html">Green Chilies</a></li>
                                                            <li><a href="shop.html">Organic Broccoli</a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="sub-column-item"><a href="shop.html">Organic Other Foods</a>
                                                        <ul>
                                                            <li class="mega-menu-banner"><a href="shop.html"><img src="img/images/megamenu_banner02.jpg" alt=""></a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li><a href="shop.html"><i class="flaticon-meat"></i> Fresh Meat</a></li>
                                            <li class="menu-item-has-children"><a href="shop.html"><i class="flaticon-cupcake"></i> Bread & Bakery</a>
                                                <ul class="megamenu">
                                                    <li class="sub-column-item"><a href="shop.html">Grocery & Frozen</a>
                                                        <ul>
                                                            <li><a href="shop.html">Organic Broccoli</a></li>
                                                            <li><a href="shop.html">Walnuts Max</a></li>
                                                            <li><a href="shop.html">Mat Orange</a></li>
                                                            <li><a href="shop.html">France Potato</a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="sub-column-item"><a href="shop.html">Organic Fresh Fruits</a>
                                                        <ul>
                                                            <li><a href="shop.html">Watermelon</a></li>
                                                            <li><a href="shop.html">Black Grapes</a></li>
                                                            <li><a href="shop.html">Grassland Dairy</a></li>
                                                            <li><a href="shop.html">Organic Broccoli</a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="sub-column-item"><a href="shop.html">Fresh Bread & Bakery</a>
                                                        <ul>
                                                            <li><a href="shop.html">Grassland Dairy</a></li>
                                                            <li><a href="shop.html">Walnuts Max</a></li>
                                                            <li><a href="shop.html">Powders Dairy</a></li>
                                                            <li><a href="shop.html">Ice cream</a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="sub-column-item"><a href="shop.html">Organic Fresh Meat</a>
                                                        <ul>
                                                            <li><a href="shop.html">Fresh Butter</a></li>
                                                            <li><a href="shop.html">Orange Sliced</a></li>
                                                            <li><a href="shop.html">Carrots Group</a></li>
                                                            <li><a href="shop.html">Poultry Farm</a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="sub-column-item"><a href="shop.html">Organic Dried Fruit</a>
                                                        <ul>
                                                            <li><a href="shop.html">Fresh Nuts</a></li>
                                                            <li><a href="shop.html">France Potato</a></li>
                                                            <li><a href="shop.html">Green Chilies</a></li>
                                                            <li><a href="shop.html">Organic Broccoli</a></li>
                                                        </ul>
                                                    </li>
                                                    <li class="sub-column-item"><a href="shop.html">Organic Other Foods</a>
                                                        <ul>
                                                            <li class="mega-menu-banner"><a href="shop.html"><img src="img/images/megamenu_banner.jpg" alt=""></a></li>
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                            <li><a href="shop.html"><i class="flaticon-broccoli"></i> Vegetable</a></li>
                                            <li><a href="shop.html"><i class="flaticon-pop-corn-1"></i> Popcorn</a></li>
                                            <li><a href="shop.html"><i class="flaticon-nut"></i> Dried Fruit</a></li>
                                        </ul>
                                    </div>
                                    <div class="navbar-wrap main-menu d-none d-lg-flex">
                                        <ul class="navigation">
                                            <li class="active menu-item-has-children"><a href="#">Home</a>
                                                <ul class="submenu">
                                                    <li class="active"><a href="index.html">Home Page One</a></li>
                                                    <li><a href="index-2.html">Home Page Two</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="about-us.html">About Us</a></li>
                                            <li><a href="shop.html">Fruits & Vegetables</a></li>
                                            <li><a href="shop-right-sidebar.html">Grocery & Staples</a></li>
                                            <li class="menu-item-has-children"><a href="#">Pages</a>
                                                <ul class="submenu">
                                                    <li><a href="shop-details.html">Shop Details</a></li>
                                                    <li><a href="cart.html">cart Page</a></li>
                                                    <li><a href="checkout.html">Checkout page</a></li>
                                                    <li><a href="blog.html">Our Blog</a></li>
                                                    <li><a href="blog-details.html">Blog Details</a></li>
                                                    <li><a href="404.html">404 Page</a></li>
                                                    <li><a href="terms-conditios.html">Terms Conditions</a></li>
                                                </ul>
                                            </li>
                                            <li><a href="contact.html">contacts</a></li>
                                        </ul>
                                    </div>
                                    <div class="header-super-store d-none d-xl-block d-lg-none d-md-block">
                                        <div class="dropdown">
                                            <button class="dropdown-toggle" type="button" id="dropdownMenuButton4" data-toggle="dropdown" aria-haspopup="true"
                                                aria-expanded="false"><i class="flaticon-shop"></i> Super Store</button>
                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton4">
                                                <a class="dropdown-item" href="shop.html">Super Store 01</a>
                                                <a class="dropdown-item" href="shop.html">Super Store 02</a>
                                                <a class="dropdown-item" href="shop.html">Super Store 03</a>
                                            </div>
                                        </div>
                                    </div>
                                </nav>
                            </div>
                            <!-- Mobile Menu  -->
                            <div class="mobile-menu">
                                <nav class="menu-box">
                                    <div class="close-btn"><i class="fas fa-times"></i></div>
                                    <div class="nav-logo"><a href="index.html"><img src="img/logo/logo.png" alt="" title=""></a>
                                    </div>
                                    <div class="menu-outer">
                                        <!--Here Menu Will Come Automatically Via Javascript / Same Menu as in Header-->
                                    </div>
                                    <div class="social-links">
                                        <ul class="clearfix">
                                            <li><a href="#"><span class="fab fa-twitter"></span></a></li>
                                            <li><a href="#"><span class="fab fa-facebook-f"></span></a></li>
                                            <li><a href="#"><span class="fab fa-pinterest-p"></span></a></li>
                                            <li><a href="#"><span class="fab fa-instagram"></span></a></li>
                                            <li><a href="#"><span class="fab fa-youtube"></span></a></li>
                                        </ul>
                                    </div>
                                </nav>
                            </div>
                            <div class="menu-backdrop"></div>
                            <!-- End Mobile Menu -->
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- header-area-end -->
        <!-- header-area-end -->

    </div>
</template>
 
<script>

import { mapGetters, mapActions, mapMutations, mapState } from 'vuex';

export default {
    components: {
         },
    data() {
        return {

        }
    },
    computed: {

    },
    created() {

    },
    mounted() {
        window.addEventListener("scroll", this.handleScroll, true);
    },
    methods: {
        handleScroll() {
            //注意不同浏览器之间的兼容性
            let scrolltop =
                document.documentElement.scrollTop || document.body.scrollTop;
            scrolltop > 30 ? (this.gotop = true) : (this.gotop = false);
        },
        toTop() {
            let top = document.documentElement.scrollTop || document.body.scrollTop;
            // 实现滚动效果
            const timeTop = setInterval(() => {
                document.body.scrollTop =
                    document.documentElement.scrollTop =
                    top -=
                    50;
                if (top <= 0) {
                    clearInterval(timeTop);
                }
            }, 10);
        },
    },
    watch: {

    },

    beforeCreate() {

    },
    beforeDestroy() {

    },
    deactivated() {

    },
}
</script>
<style></style>